//封装移动动画
//1获取样式属性
let units = (function () {
    let getStyle = (obj, attr) => {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }
    //2封装动画
    let animit = (oEle, json) => {
        clearInterval(oEle.triem);
        oEle.triem = setInterval(() => {
            let flag = true;
            let current = 0; //当前位置
            let steps = 0;//步长
            for (let attr in json) {
                //取目标值和当前值
                if (attr === 'opacity') {
                    target = parseFloat(json[attr]) * 100;//取没有单位时候的目标值
                    current = parseFloat(getStyle(oEle, attr)) * 100;//取没有单位时当前值;
                } else {
                    target = parseInt(json[attr]);
                    current = parseInt(getStyle(oEle, attr));
                }
                // //步长 = (目标值-当前位置)/10 判断步长
                let steps = (target - current) / 10
                steps = steps > 0 ? Math.ceil(steps) : Math.floor(steps);
                //新的位置 = 当前位置 + 步长
                //新的位置
                if (attr === 'opacity') {
                    oEle.style[attr] = (current + steps) / 100
                } else if (attr === 'zIndex') {
                    oEle.style[attr] = target;
                } else {
                    oEle.style[attr] = current + steps + 'px';
                }
                if (current != target) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(oEle.triem);
                if (typeof (callback) === 'function') {
                    callback();
                }
            }
        }, 20);
    }
    let getScoll = () => {
        if (window.pageYOffset != undefined) {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset,
            }
        } else if (document.compatMode === 'CSS1compat') {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop,
            }
        }
        return {
            left: document.body.scrollLeft,
            top: document.body.scrollTop,
        }
    }
    return{
        getStyle,
        animit,
        getScoll
    }
})()
